<template>
  <view
    style="
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    "
    :style="{ padding: padding }"
  >
    
    <image
      v-if="color == 'white'"
      src="../static/no-data-2.png"
      mode=""
      style="width: 197rpx; height: 175rpx" 
    ></image>
    <image
      v-else
      src="../static/no-data.png"
      mode=""
      style="width: 375rpx; height: 284rpx"
    ></image>
    <view class="text-color-65" :class="{ white: color=='white' }" :style="{fontSize: fontSize}">{{ dataLoading ? '加载中...' : text }}</view>
  </view>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "暂无数据",
    },
    padding: {
      type: String,
      default: "116rpx 0",
    },
    fontSize: {
      type: String,
      default: "28rpx",
    },
    loading: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: ""
    }
  },
  data(){
	  return {
		  dataLoading: false
	  }
  },
  mounted() {
  	this.dataLoading = this.loading
  },
  watch: {
	  loading(val){
		  this.dataLoading = val
	  }
  }
};
</script>

<style>
  .white{
    color: rgba(255,255,255,0.65);
    margin-top: 24rpx;
  }
</style>